<template>
	<view class="flex-col page">
		<view>
			<view :style="{height:statusBarHeight+'px'}"></view>
			<u-navbar title="个人资料" bgColor="#F5F5F5" @leftClick="$nav(2)">	
			</u-navbar>
		</view>
		
		
		<view class="basic-box">
			<view class="flex-row justify-between items-center">
				<text>头像</text>
			
				<image @click="updateImg" class="avator" :src="imgUrl ? imgUrl : staticResource('user/default_avatar.jpg')"></image>
			</view>
			<view class="line"></view>
			
			<view class="flex-row justify-between items-center" style="margin-top: 30rpx;">
				<text>账号</text>
				<text>{{mobile}}</text>
			</view>
			<view class="line"></view>
			<view class="flex-row justify-between items-center" style="margin-top: 30rpx;">
				<text>昵称</text>
				 <u--input
				    
					inputAlign='right'
				    placeholder="请输入昵称"
				    border="none"
				    v-model="nickname"
					clearable
				  ></u--input>
			</view>
			
			<view class="line"></view>
			
			<view @click="showDate" class="flex-row justify-between items-center" style="margin-top: 30rpx;margin-bottom: 20rpx;">
				 <text>出生日期</text>
				 <view>
					 <text style="color: #999;">{{currentDate ? currentDate : '请选择'}}</text>
					 <u-datetime-picker
						ref="datetimePicker"
						:show="show"
						v-model="birthday"
						mode="date"
						:minDate="-315608584000"
						:maxDate="1786778555000"
						:formatter="formatter"
						@cancel="cancel"
						@confirm="confirm"
					 ></u-datetime-picker>
				 </view>
				 
			</view>
			
		</view>
	
		<view style="margin-top: 50rpx;">
			<view class="btn-box">
			    <u-button type="primary" shape="circle" :plain="true" text="退出登录" @click="onLogout"></u-button>
				<u-button type="success" shape="circle" text="保存修改" @click="onSubmit"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/common/api.js'
	export default {
		data() {
			return {
				userInfo:{},
				nickname:'',
				imgUrl:'',
				show:false,
				birthday:Number(new Date()),
				currentDate:'',
				mobile:''
			};
		},
		onLoad() {
			this.getUserInfo();
		},
		computed:{
			statusBarHeight(){
				return this.$store.state.statusBarHeight +44;
			}
		},
		onReady() {
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		methods:{
			timestampToFormattedDate(timestamp) {
			    const date = new Date(timestamp);
			    const year = date.getFullYear();
			    const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份是从0开始的
			    const day = date.getDate().toString().padStart(2, '0');
			    return `${year}-${month}-${day}`;
			},
			confirm(val){
				this.show = false;
				let date = this.timestampToFormattedDate(val.value);
				this.currentDate = date;
				
			},
			cancel(){
				this.show = false;
			},
			showDate(){
				this.show = true;
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},

			onLogout(){
				let that = this;
				uni.showModal({
					title:  '提示',
					content: '确认退出登录吗？',
					cancelText: '取消',
					confirmText: '确定',
					confirmColor: '#007aff',
					success(res) {
						console.log(res.confirm);
						if (res.confirm) {
							that.toIndex();
						}
					}
				})
			},
			toIndex(){
				this.$request({
					url:'?c=User&a=logout',
					type:'post'
				}).then(res =>{
					this.$store.commit('setToken','');
					this.$store.commit('setUserInfo','');	
					this.$store.commit('setCartUpdate','');	
					uni.switchTab({ url: "/pages/index/index" });	
				})
			},
			onSubmit(){
				this.$request({
					url:'?c=User&a=infoEdit',
					type:'post',
					data:{
						type:1,
						nickname:this.nickname,
						birthday:this.currentDate
					}
				}).then(res =>{
					this.$u.toast('保存成功');
				})
			},
			updateImg(){
				let token = this.$store.state.token;
				let that = this;
				uni.chooseImage({
					count:1,
					sizeType:['compressed'],
					sourceType: ['album','camera'],
					success: res=> {
						that.imgUrl = res.tempFilePaths[0];
						uni.uploadFile({
							url : api.IMG_URL,
							filePath: that.imgUrl,
							name:'file',
							header:{
								Apitoken : token,
							},
							formData:{
								'type' : 1
							},
							success: (uploadFileRes) => {
								let json = JSON.parse(uploadFileRes.data);
								// console.log(json.data.img_url);
								
								that.$request({
									url:'?c=User&a=infoEdit',
									type:'post',
									data:{
										type:2,
										avatar:json.data.img_url
									}
								}).then(res =>{
									console.log(res);
								})
								
							}
						})
						
					}
				})
			},
			getUserInfo(){
				this.$request({
					url:'?c=User&a=info',
					type:'get',
				}).then(res =>{
					this.userInfo = res.data;
					this.nickname = this.userInfo.nickname;
					this.imgUrl = this.userInfo.avatar;
					this.currentDate = this.userInfo.birth;
					this.mobile = this.userInfo.mobile;
					// console.log(this.imgUrl)
				})
			},
			staticResource(path){
				return "https://ysmz.scmzhc.com/static/mini/images/"+path;
			},
		}
	}
</script>

<style lang="scss">
.page{
	width: 100%;
	height: 100vh;
	overflow-y: auto;
	overflow-x: hidden;
}
.basic-box{
	background-color: #fff;
	border-radius: 10rpx;
	margin: 20rpx;
	padding: 20rpx;
}
.avator{
	width: 110rpx;
	height: 110rpx;
	overflow: hidden;
	border-radius: 50%;
}
.line{
	border: 1px solid #f5f5f5;
	margin-top: 25rpx;
}
.btn-box {
    padding: 25rpx 15rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
	gap: 20rpx;
    .btn {
        width: 48%;
        font-size: 28rpx;
        height: 100%;
    }
}
</style>
